import { useEffect, useState } from 'react'
import { main } from '@model';
import { DeleteNote, GetHeatMap, TagList, List as noteList } from '@app';
import EditorArea from './component/listPage/EditorArea';
import { Button, Card, Flex, Layout, Pagination, Space, Switch, Tag, notification } from 'antd';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import Sider from 'antd/es/layout/Sider';
import { Content } from 'antd/es/layout/layout';
import { useAppDispatch, useAppSelector } from './store/hooks';
import { setPageNumber, page as pageRedux, setPageSize } from './store/pageNumber';
import { tags as tagsRedux } from '@/store/tags';
import SiderMenu from '@/component/listPage/SiderMenu';

export default function ListPage() {
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const [list, setList] = useState(Array<main.Note>())
  const [total, setTotal] = useState(0)
  const page = useAppSelector(pageRedux)
  const selectedTags = useAppSelector(tagsRedux)
  // const [heatMap, setHeatMap] = useState(Array<main.HeatMap>())

  const [readModel, setReadModel] = useState(false)

  useEffect(() => {
    dispatch(setPageSize(5))

    // const end = moment().format('YYYY-MM-DD')
    // const start = moment().subtract(30, 'days').format('YYYY-MM-DD')
    // GetHeatMap(start, end).then((h) => {
    //   setHeatMap(h)
    // })

  }, [])

  useEffect(() => {
    fetchNote()
  }, [selectedTags.length, page.current, page.size])

  const pageChange = (page: number, pageSize: number) => {
    dispatch(setPageSize(pageSize))
    dispatch(setPageNumber(page))
  }


  const fetchNote = async () => {
    await noteList(page.current, page.size, selectedTags).then(resp => {
      setList(resp.data)
      setTotal(resp.total)
    }).catch(err => {
      notification.error({
        message: "查询失败！",
        description: err,
        placement: 'topLeft'
      })
    })
  }

  const onDelete = (id: number) => {
    DeleteNote(id).then(() => {
      fetchNote()
    }).catch((err) => {
      notification.error({
        message: "删除失败！",
        description: err,
        placement: 'bottomLeft'
      })
    })
  }

  return <div>

    <Layout style={{ background: 'none' }}>
      <Sider style={{
        background: 'none',
        '--wails-draggable': 'drag'
      } as React.CSSProperties}>
        <SiderMenu />
      </Sider>
      <Content>
        <div style={{
          paddingLeft: 5,
          '--wails-draggable': 'drag'
        } as React.CSSProperties}>
          <Space>
            <Switch value={readModel} onChange={(checked: boolean) => { setReadModel(checked) }} />
            阅读模式
          </Space>
        </div>
        <div
          style={{
            padding: 5,
          }}
        >
          {list.map(item => (
            <Card key={item.id} style={{ marginTop: 10 }} hoverable={true} onClick={() => { navigate(`/note?id=${item.id}`) }}>
              <EditorArea note={item} readModel={readModel} />
              <Flex justify='space-between'>
                <Space>
                  <div style={{ width: 20 }}></div>
                  {
                    item.tags.map(tag => (
                      <Tag key={tag.id}>{tag.name}</Tag>
                    ))
                  }
                </Space>

                {/*考虑下删除的时候价格禁止点击*/}
                <Button danger type="primary" size='small' onClick={(event) => {
                  onDelete(item.id)
                  event.stopPropagation()
                }}>删除</Button>
              </Flex>
            </Card>
          ))}
        </div>

        <Pagination
          showSizeChanger
          onChange={pageChange}
          total={total}
          defaultCurrent={page.current}
          defaultPageSize={page.size}
          pageSizeOptions={[5, 10, 20, 50]}
        />
      </Content>
    </Layout>

  </div >
}
